<template>
	<view class="container">
    <view class="list" v-if="invoiceList.length">
      <radio-group @change="radioChange">
            <view class="item" v-for="(item, index) in invoiceList" :key="index">
                <view class="left">
                    <radio :value="item.id" :checked="index === current" v-if="order_id" />
                    <view class="left-main">
                        <view class="name"><view class="name-txt">{{item.name}}</view><text v-if="item.is_default">默认</text></view>
                        <view class="card-no" :class="{ special: item.type === 2 }">{{ item.type === 1 && item.header_type === 1 ? $t(`个人普通发票`) : item.type === 1 && item.header_type === 2?$t(`企业普通发票`):$t(`企业专用发票`) }}</view>
                    </view>
                </view>
                <view class="right" @tap="handleEdit(item)">
                  <text class='iconfont icon-bianji' style="color: #008DFF;font-size: 36rpx;"></text>
                  <!-- 编辑 <view class="iconfont icon-jiantou _font-10" style="color: #bdbdbd;margin-left: 8rpx;"></view> -->
                </view>
            </view>
       </radio-group>
    </view>
    <view class="no-tenant-box" v-else>
      <image src="../static/no_coupon.png" class="no-tenant-img" />
      <view class="text">暂无发票抬头</view>
    </view>
     <view class="operate-box" @tap="confirmApplyInvoice" v-if="order_id">确认开票</view>
     <view class="operate-tips-box" @tap="handleAdd"  v-if="order_id">新增发票抬头</view>
     <view class="operate-box" @tap="handleAdd" v-else>新增发票抬头</view>
	</view>
</template>

<script>
  import {
  	invoiceList,
    invoiceOrder
  } from '@/api/user.js';

  
	export default {
      data() {
        return {
          date: '',
          loadTitle: this.$t(`加载更多`),
          invoiceList: [],
          nav: 1, // 1：发票记录 2：抬头管理
          page: 1,
          limit: 30,
          loading: false,
          finished: false,
          order_id: '', // 订单id
          current: 0,
          checkInvoiceId: ''
        }
      },
      // computed: {
      //   checkInvoiceId: () => {
      //     return this.invoiceList[this.current].id
      //   }
      // },
      onLoad(options) {
        if(options.order_id){
          this.order_id = options.order_id
        }
      },
      onShow: function() {
      	this.getInvoiceList(true);
      },
      methods: {
              radioChange: function(evt) {
                  console.log('evt', evt)
                  for (let i = 0; i < this.invoiceList.length; i++) {
                      if (this.invoiceList[i].id === evt.detail.value) {
                          this.current = i;
                          break;
                      }
                  }
                  this.checkInvoiceId = evt.detail.value
              },
              confirmApplyInvoice(){
                 console.log('this.checkInvoiceId', this.checkInvoiceId)
                 this.goApplyInvoice(this.order_id, this.checkInvoiceId)
              },
              goApplyInvoice(order_id = '', invoice_id = ''){
                let params = {
                  order_id, // 订单ID
                  invoice_id // 抬头ID
                }
                console.log('params', params)
                invoiceOrder(params).then((res) => {
                  console.log('res233----', res)
                  if(res.status == 200){
                    this.$util.Tips({
                      title: '申请开票成功',
                     	icon: 'none',
                    }, ()=> {
                       uni.navigateBack()
                    })

                  }else{
                    this.$util.Tips({
                      title: res.msg,
                     	icon: 'none',
                    }, ()=> {
                       uni.navigateBack()
                    })
                  }
                 
                }).catch(err => {
                  console.log('err', err)
                  this.$util.Tips({
                    title: err,
                    icon: 'none'
                  }, ()=> {
                     uni.navigateBack()
                  })
              	});
              },
              // 发票列表
              getInvoiceList(flag) {
                uni.showLoading({
                  title: this.$t(`加载中`)
                });
                if(flag){
                  this.page = 1
                  this.invoiceList = []
                }
                invoiceList({
                  page: this.page,
                  limit: this.limit
                }).then(res => {
                  const {
                    data
                  } = res;
                  uni.hideLoading();
                  this.invoiceList = this.invoiceList.concat(data);
                  if(flag){
                    this.checkInvoiceId = this.invoiceList[this.current].id;
                  }
                  this.finished = data.length < this.limit;
                  this.page += 1;
                }).catch(err => {
                  uni.showToast({
                    title: err.msg,
                    icon: 'none'
                  });
                });
              },
              bindDateChange: function(e) {
                  this.date = e.detail.value
              },
              handleAdd(){
                uni.navigateTo({
                  url: `/pages/users/invoice/add_edit_title`
                })
              },
              handleEdit(item){
                uni.navigateTo({
                  url: `/pages/users/invoice/add_edit_title?info=` + encodeURIComponent(JSON.stringify(item)) + `&id=${item.id}`
                })
              }
      }
	}
</script>

<style lang="scss" scoped>
	page {
    min-height: 100vh;
		background-color: rgb(248,249,252);
	}
  .no-tenant-box{
    .no-tenant-img{
      width: 360rpx;
      height: 360rpx;
      display: block;
      margin: 200rpx auto 10rpx;
    }
    .text{
      text-align: center;
      font-size: 26rpx;
      color: #B9B9BD;
    }
  }
	.container {
		padding: 32rpx;
	}
  .list{
    
  }
  .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFF;
    font-size: 28rpx;
    color: rgba(0,0,0,0.9);
    padding: 32rpx 28rpx;
    border-radius: 10rpx;
    margin-bottom: 24rpx;
    .left{
      display: flex;
      .left-main{
        display: flex;
        flex-direction: column;
      }
      .name{
        margin-bottom: 24rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #111E36;
        display: flex;
        align-items: center;
        .name-txt{
            max-width: 520rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        text{
          margin-left: 12rpx;
          padding: 8rpx 12rpx;
          background: #F8F9FC;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          font-size: 24rpx;
          color: #FF5700;
        }
      }
      .card-no{
        font-size: 28rpx;
        color: rgba(0,0,0,0.6);
      }
    }
    .right{
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: rgba(0,0,0,0.4);
    }
  }
  .operate-box{
    width: 686rpx;
    height: 96rpx;
    line-height: 96rpx;
    margin: 200rpx auto 30rpx;
    box-sizing: border-box;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #FFFFFF;
    background: #008DFF;
    text-align: center;
    border-radius: 12rpx;
  }
  .operate-tips-box{
    font-size: 30rpx;
    color: #008DFF;
    margin: 30rpx auto 20rpx;
    text-align: center;
  }
</style>
